<!doctype html>
<html class="no-js">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>良品</title>
  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">
  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Amaze UI" />
  <!-- 设置页面不缓存 -->
  <!-- <meta http-equiv="pragma" content="no-cache"> -->
  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileColor" content="#0e90d2">
  <link rel="stylesheet" href="css/amazeui.min.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/app.js"></script>
  <script src="js/modernizr.js"></script>
  <script src="js/amazeui.min.js"></script>
  <style>
    .nav-bar {
      background-color: #fafafa;
    }

    .nav-bar a {
      border-top: 1px solid #bfbfbf;
      border-right: 1px solid #bfbfbf;
      color: #4b4b4b;
      font-size: 16px;
    }
  </style>
</head>

<body style="padding-bottom:50px;">
  <div class="inner">
    <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;:false}'>
      <ul class="am-slides">
        <li>
          <a href=""><img src="http://s.amazeui.org/media/i/demos/bing-1.jpg"></a>

        </li>
        <li>
          <a href=""><img src="http://s.amazeui.org/media/i/demos/bing-2.jpg"></a>

        </li>
        <li>
          <a href=""><img src="http://s.amazeui.org/media/i/demos/bing-3.jpg"></a>

        </li>
        <li>
          <a href=""><img src="http://s.amazeui.org/media/i/demos/bing-4.jpg"></a>

        </li>
      </ul>
    </div>
    <!-- 搜索 -->
    <form action="">
      <div class="am-g am-margin-top-sm ">
        <div class="am-u-sm-12" style="border-radius: 3px;">
          <div class="am-input-group">
            <span class="am-input-group-btn">
                  <button class="am-btn " type="submit" style="background-color:#ffffff;color:#cccccc;"><span class="am-icon-search"></span>            </button>
            </span>
            <input type="text" class="am-form-field" placeholder="搜索商品">
          </div>
        </div>
      </div>
    </form>

    <!-- 列表 -->
    <ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 shoplist am-margin-bottom-xs
      am-avg-md-2 am-avg-lg-3 am-gallery-bordered" data-am-gallery="{  }">
      <li>
        <div class="am-gallery-item" style="background-color: #ffffff">
          <a href="product.html" class="">
            <div class="shoplist-img">
              <img src="images/pic-home1.jpg" alt="远方 有一个地方 那里种有我们的梦想" />
            </div>
            <h3 class="" style="height:45px;overflow: hidden;color:#333333;">远方 有一个地方 那里种有我们的梦想</h3>
          </a>
          <div class="am-gallery-desc" class="col1 am-cf" style="color: #ff6600;font-size:16px;
                margin-bottom: 5px;">
            ￥99 <span class="am-badge am-badge-warning am-text-sm am-fr am-margin-top-xs" data-am-modal="{target: '.my-actions'}"
              style=" cursor: pointer;font-weight: 300;background-color:#ffab73;">订购</span>
          </div>
        </div>
      </li>
      <li>
        <div class="am-gallery-item" style="background-color: #ffffff">
          <a href="product.html" class="">
            <div class="shoplist-img">
              <img src="images/pic-home1.jpg" alt="远方 有一个地方 那里种有我们的梦想" />
            </div>
            <h3 class="" style="height:45px;overflow: hidden;color:#333333;">远方 有一个地方 那里种有我们的梦想</h3>
          </a>
          <div class="am-gallery-desc" class="col1 am-cf" style="color: #ff6600;font-size:16px;
                margin-bottom: 5px;">
            ￥99 <span class="am-badge am-badge-warning am-text-sm am-fr am-margin-top-xs" data-am-modal="{target: '.my-actions'}"
              style=" cursor: pointer;font-weight: 300;background-color:#ffab73;">订购</span>
          </div>
        </div>
      </li>
      <li>
        <div class="am-gallery-item" style="background-color: #ffffff">
          <a href="product.html" class="">
            <div class="shoplist-img">
              <img src="images/pic-home1.jpg" alt="远方 有一个地方 那里种有我们的梦想" />
            </div>
            <h3 class="" style="height:45px;overflow: hidden;color:#333333;">远方 有一个地方 那里种有我们的梦想</h3>
          </a>
          <div class="am-gallery-desc" class="col1 am-cf" style="color: #ff6600;font-size:16px;
                margin-bottom: 5px;">
            ￥99 <span class="am-badge am-badge-warning am-text-sm am-fr am-margin-top-xs" data-am-modal="{target: '.my-actions'}"
              style=" cursor: pointer;font-weight: 300;background-color:#ffab73;">订购</span>
          </div>
        </div>
      </li>
      <li>
        <div class="am-gallery-item" style="background-color: #ffffff">
          <a href="product.html" class="">
            <div class="shoplist-img">
              <img src="images/pic-home1.jpg" alt="远方 有一个地方 那里种有我们的梦想" />
            </div>
            <h3 class="" style="height:45px;overflow: hidden;color:#333333;">远方 有一个地方 那里种有我们的梦想</h3>
          </a>
          <div class="am-gallery-desc" class="col1 am-cf" style="color: #ff6600;font-size:16px;
                margin-bottom: 5px;">
            ￥99 <span class="am-badge am-badge-warning am-text-sm am-fr am-margin-top-xs" data-am-modal="{target: '.my-actions'}"
              style=" cursor: pointer;font-weight: 300;background-color:#ffab73;">订购</span>
          </div>
        </div>
      </li>
      <li>
        <div class="am-gallery-item" style="background-color: #ffffff">
          <a href="product.html" class="">
            <div class="shoplist-img">
              <img src="images/pic-home1.jpg" alt="远方 有一个地方 那里种有我们的梦想" />
            </div>
            <h3 class="" style="height:45px;overflow: hidden;color:#333333;">远方 有一个地方 那里种有我们的梦想</h3>
          </a>
          <div class="am-gallery-desc" class="col1 am-cf" style="color: #ff6600;font-size:16px;
                margin-bottom: 5px;">
            ￥99 <span class="am-badge am-badge-warning am-text-sm am-fr am-margin-top-xs" data-am-modal="{target: '.my-actions'}"
              style=" cursor: pointer;font-weight: 300;background-color:#ffab73;">订购</span>
          </div>
        </div>
      </li>
      <li>
        <div class="am-gallery-item" style="background-color: #ffffff">
          <a href="product.html" class="">
            <div class="shoplist-img">
              <img src="images/pic-home1.jpg" alt="远方 有一个地方 那里种有我们的梦想" />
            </div>
            <h3 class="" style="height:45px;overflow: hidden;color:#333333;">远方 有一个地方 那里种有我们的梦想</h3>
          </a>
          <div class="am-gallery-desc" class="col1 am-cf" style="color: #ff6600;font-size:16px;
                margin-bottom: 5px;">
            ￥99 <span class="am-badge am-badge-warning am-text-sm am-fr am-margin-top-xs" data-am-modal="{target: '.my-actions'}"
              style=" cursor: pointer;font-weight: 300;background-color:#ffab73;">订购</span>
          </div>
        </div>
      </li>




    </ul>

    <!-- 单一图片 -->
    <div style="width:calc(100% - 10px);margin:0 auto;border:1px solid #333">
      <a href=""><img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" class="am-img-responsive" alt=""/></a>
    </div>
    <!--  -->
    <ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 shoplist 
    am-avg-md-2 am-avg-lg-3 am-gallery-bordered" data-am-gallery="{  }">
      <li>
        <div class="am-gallery-item">
          <a href="product.html" class="">
            <div class="shoplist-img">
              <img src="images/pic-home1.jpg" alt="远方 有一个地方 那里种有我们的梦想" />
            </div>
            <h3 class="" style="height:45px;overflow: hidden;color:#333333;">远方 有一个地方 那里种有我们的梦想</h3>
          </a>
          <div class="am-gallery-desc" class="col1 am-cf" style="color: #ff6600;font-size:16px;
              margin-bottom: 5px;">
            ￥99 <span class=" am-fr" style=" cursor: pointer;" data-am-modal="{target: '.my-actions'}"><img src="images/btn-shop.jpg" alt=""></span>
          </div>
        </div>
      </li>
      <li>
        <div class="am-gallery-item">
          <a href="product.html" class="">
            <div class="shoplist-img">
              <img src="images/pic-home1.jpg" alt="远方 有一个地方 那里种有我们的梦想" />
            </div>
            <h3 class="" style="height:45px;overflow: hidden;color:#333333;">远方 有一个地方 那里种有我们的梦想</h3>
          </a>
          <div class="am-gallery-desc" class="col1 am-cf" style="color: #ff6600;font-size:16px;
              margin-bottom: 5px;">
            ￥99 <span class=" am-fr" style=" cursor: pointer;" data-am-modal="{target: '.my-actions'}"><img src="images/btn-shop.jpg" alt=""></span>
          </div>
        </div>
      </li>
      <li>
        <div class="am-gallery-item">
          <a href="product.html" class="">
            <div class="shoplist-img">
              <img src="images/pic-home1.jpg" alt="远方 有一个地方 那里种有我们的梦想" />
            </div>
            <h3 class="" style="height:45px;overflow: hidden;color:#333333;">远方 有一个地方 那里种有我们的梦想</h3>
          </a>
          <div class="am-gallery-desc" class="col1 am-cf" style="color: #ff6600;font-size:16px;
              margin-bottom: 5px;">
            ￥99 <span class=" am-fr" style=" cursor: pointer;" data-am-modal="{target: '.my-actions'}"><img src="images/btn-shop.jpg" alt=""></span>
          </div>
        </div>
      </li>
      <li>
        <div class="am-gallery-item">
          <a href="product.html" class="">
            <div class="shoplist-img">
              <img src="images/pic-home1.jpg" alt="远方 有一个地方 那里种有我们的梦想" />
            </div>
            <h3 class="" style="height:45px;overflow: hidden;color:#333333;">远方 有一个地方 那里种有我们的梦想</h3>
          </a>
          <div class="am-gallery-desc" class="col1 am-cf" style="color: #ff6600;font-size:16px;
              margin-bottom: 5px;">
            ￥99 <span class=" am-fr" style=" cursor: pointer;" data-am-modal="{target: '.my-actions'}"><img src="images/btn-shop.jpg" alt=""></span>
          </div>
        </div>
      </li>
      <li>
        <div class="am-gallery-item">
          <a href="product.html" class="">
            <div class="shoplist-img">
              <img src="images/pic-home1.jpg" alt="远方 有一个地方 那里种有我们的梦想" />
            </div>
            <h3 class="" style="height:45px;overflow: hidden;color:#333333;">远方 有一个地方 那里种有我们的梦想</h3>
          </a>
          <div class="am-gallery-desc" class="col1 am-cf" style="color: #ff6600;font-size:16px;
              margin-bottom: 5px;">
            ￥99 <span class=" am-fr" style=" cursor: pointer;" data-am-modal="{target: '.my-actions'}"><img src="images/btn-shop.jpg" alt=""></span>
          </div>
        </div>
      </li>
      <li>
        <div class="am-gallery-item">
          <a href="product.html" class="">
            <div class="shoplist-img">
              <img src="images/pic-home1.jpg" alt="远方 有一个地方 那里种有我们的梦想" />
            </div>
            <h3 class="" style="height:45px;overflow: hidden;color:#333333;">远方 有一个地方 那里种有我们的梦想</h3>
          </a>
          <div class="am-gallery-desc" class="col1 am-cf" style="color: #ff6600;font-size:16px;
              margin-bottom: 5px;">
            ￥99 <span class=" am-fr" style=" cursor: pointer;" data-am-modal="{target: '.my-actions'}"><img src="images/btn-shop.jpg" alt=""></span>
          </div>
        </div>
      </li>


    </ul>

    <div class=" am-text-center bor-t1 bor-b1" style="height:50px;line-height:50px;">
      <a style="color:#333;margin-left:5px;" href="">店铺主页</a>
      <a style="color:#333;margin-left:5px;" href="">会员中心</a>
      <a style="color:#333;margin-left:5px;" href="">关注我们</a>
      <a style="color:#333;margin-left:5px;" href="">店铺信息</a>
    </div>
    <div style="height:100px;" class="">
      <div style="height:50px;line-height:65px;" class="am-text-lg col6 am-text-center">
        <img style="width:26px;height:28px;" src="images/logo_l.jpg" alt="">&nbsp;灵一睿
      </div>
      <div class="am-text-center col6 am-text-sm" style="height:50px;line-height:30px;">灵一睿提供技术支持</div>
    </div>
  </div>

  <!-- 模态框 -->
  <div class="am-modal-actions my-actions" id="my-actions" style="background-color:#f9f7f8">
    <form action="" style="width:100%;height:100%;">
      <div class="am-modal-actions-group">
        <ul class="am-list am-list1">
          <!-- 标题内容 -->
          <li class="am-modal-actions-header" style="display:flex;padding-left:0;">
            <div class="am-margin-right-xs" style="width:70px;height:60px;border:2px solid #eeeced;border-radius: 2px;"><img style="width:100%;height:100%;" src="images/pic-shoplist.jpg" alt=""></div>
            <div style="width:calc(100% - 130px);">
              <p class="am-text-truncate am-text-default" style="color:#333;font-weight: 700;margin-bottom:5px;">远方 有一个地方 那里种有我们的梦想梦想</p>
              <div class="am-text-left col1 am-text-default am-margin-top-xs">￥99</div>
            </div>
            <div class=" am-padding-left-xl" style="width:60px;">
              <a href="javascript:;" class="am-close am-close-alt am-btn-block" data-am-modal-close>&times;</a>
            </div>

          </li>
          <!-- 颜色 -->
          <li class="yanse" style="white-space: normal;
            overflow: visible;">
            <h3 class="am-text-left am-padding-top-xs am-margin-bottom-xs" style="">颜色：</h3>
            <div class="am-text-left colour am-margin-bottom-xs am-margin-top-xs">
              <label class="">
                    <input type="radio" name="clour">大众黑色
                  </label>
              <label class="">
                    <input type="radio" name="clour">大众黑色
                  </label>
            </div>
          </li>
          <!-- 尺寸 -->
          <li class="yanse" style="white-space: normal;
            overflow: visible;">
            <h3 class="am-text-left am-padding-top-xs am-margin-bottom-xs" style="">尺寸：</h3>
            <div class="am-text-left colour am-margin-bottom-xs am-margin-top-xs">
              <label class="">
                    <input type="radio" name="clour">大众黑色
                  </label>
              <label class="">
                    <input type="radio" name="clour">大众黑色
                  </label>
            </div>
          </li>
          <!-- 购买数量 -->
          <li class="am-cf am-padding-bottom-sm">
            <div class="am-text-left am-padding-top-sm am-padding-bottom-xs">
              <span class="am-fl">购买数量：</span>

              <div class="am-btn-group am-btn-group-xs am-fr count">
                <button type="button" class="am-btn am-btn-default am-fl" style="line-height:100%; background-color:#ffffff;">－</button>
                <input type="text" style="border:1px solid #C2C0C0; border-right:none;border-left:none;" value="1" class="am-fl" onkeyup="this.value=this.value.replace(/\D/g,'')"
                  onafterpaste="this.value=this.value.replace(/\D/g,'')">
                <button type="button" class="am-btn am-btn-default am-fl" style="line-height:100%;background-color:#ffffff;">＋</button>
              </div>
            </div>
          </li>
          <li></li>
        </ul>
      </div>
      <div class="am-modal-actions-group">
        <a href="bay.html" class="am-btn am-btn-secondary am-btn-block" style="background-color: #fe4543;border:1px solid #fe4543">下一步</a>
      </div>
    </form>
  </div>



























  <footer class="am-g nav-bar" style="height:50px; display:flex;position:fixed;bottom:0;z-index:999;">
    <div style="width:44px;">
      <a style="line-height:50px;text-align:center;width:100%;display:block;" href="javasctipt:;"><img src="images/btn-home.jpg" alt=""></a>
    </div>
    <div style="width:calc(100% - 44px); display:flex;">
      <div style="width:33.33333%;"><a style="line-height:50px;text-align:center;width:100%;display:block;" href="productlist.html">全部商品</a></div>
      <div style="width:33.33333%;"><a style="line-height:50px;text-align:center;width:100%;display:block;" href="shoppingcart.html">购物车</a></div>
      <div style="width:33.33333%;"><a style="line-height:50px;text-align:center;width:100%;display:block;" href="orders.html">我的订单</a></div>
    </div>
  </footer>



</body>

</html>
<script>

</script>